<template>
    <h3>1模板语法</h3>
    <p>{{ msg }}</p>
    <!-- {{ }} 用来输出变量 -->
    <p>{{ number }}</p>
    <p>{{ ok ? "yes" : "no" }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <!-- 在双花括号中的内容并不只限于标识符或路径——
     我们可以使用任何有效的 JavaScript 表达式 -->
    <!-- <p>{{ var a = 10; a }}</p>    bad code -->
    <!-- <p>{{ if(ok){ return "yes"; } }}</p>   bad code -->
    <p>{{ returnA }}</p>
    <p v-html="returnA"></p>
  </template>
  <script>
  // 定义了一个 Vue 组件
  export default {
    // data 函数返回一个对象，包含组件的响应式数据
    data() {
      // 这里的属性会被当作响应式数据，且会在组件的不同实例之间共享
      return {
        msg: "i am a message!",
        number: 10,
        ok: true,
        message: "loong早上好",
        returnA: "<a href='#'>link</a>"
      }
    }
  }
  </script>
  